<template>
	<view class="page">
		<uni-list :border="false">
			<uni-list-item  showArrow :isBorder="true">
				<view slot="left" class="slot-box">
					<zywork-icon   type="iconlocation" color="#6D6D6D" size="40"  />
				</view>
				<text class="slot-text" >学校</text>
				<template  slot="right" class="right">
					<view class="edit-user-info" >
						<picker class="picker" @change="schoolChange" :value="indexSchool" :range="arraySchool" range-key="school">
							<view class="uni-input">{{arraySchool[indexSchool].school}}</view>
						</picker>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item  :isBorder="true" showArrow>
				<view slot="left" class="slot-box">
					<zywork-icon   type="icondian" color="#6D6D6D" size="40"  />
				</view>
				<text class="slot-text" >楼栋</text>
				<view  slot="right" class="right">
					<view class="edit-user-info" >
						<view class="info">
							<input  type="text"  v-model="addressDetails.storiedBuilding" placeholder="填写你所在楼栋"/>
						</view>
					</view>
				</view>
				<!-- <template  slot="right" class="right">
					<view class="edit-user-info" >
						<picker class="picker" @change="buildingChange" :value="indexBuilding" :range="arrayBuilding">
							<view class="uni-input">{{addressDetails.building?addressDetails.building:arrayBuilding[indexBuilding]}}</view>
						</picker>
					</view>
				</template> -->
			</uni-list-item>
			<uni-list-item  :isBorder="true"  showArrow zyworkIcon="iconpan_icon">
				<view slot="left" class="slot-box">
					<zywork-icon   type="icondian" color="#6D6D6D" size="40"  />
				</view>
				<text class="slot-text" >宿舍</text>
				<view  slot="right" class="right">
					<view class="edit-user-info" >
						<view class="info">
							<input  type="text"  v-model="addressDetails.area" placeholder="请填写区域,宿舍号"/>
						</view>
					</view>
				</view>
			</uni-list-item>
			<view class="zy-border"></view>
			<view class="zy-border"></view>
			<view class="zy-border"></view>
			<uni-list-item  :isBorder="true" showArrow zyworkIcon="iconpan_icon">
				<view slot="left" class="slot-box">
					<zywork-icon   type="icondian" color="#6D6D6D" size="40"  />
				</view>
				<text class="slot-text" >真实姓名</text>
				<view  slot="right" class="right">
					<view class="edit-user-info" >
						<view class="info">
							<input  type="text"  v-model="addressDetails.realName" placeholder="建议填写真实姓名"/>
						</view>
					</view>
				</view>
			</uni-list-item>
			<!-- <uni-list-item  :isBorder="true" showArrow zyworkIcon="iconpan_icon">
				<view slot="left" class="slot-box">
					<zywork-icon   type="icondian" color="#6D6D6D" size="40"  />
				</view>
				<text class="slot-text">收件人</text>
				<view  slot="right" class="right">
					<view class="edit-user-info" >
						<view class="info">
							<input  type="text"  v-model="addressDetails.addressee" placeholder="请填写收件人昵称"/>
						</view>
					</view>
				</view>
			</uni-list-item> -->
			<uni-list-item  :isBorder="true"  showArrow zyworkIcon="iconpan_icon">
				<view slot="left" class="slot-box">
					<zywork-icon   type="icondian" color="#6D6D6D" size="40"  />
				</view>
				<text class="slot-text" >收件人手机号</text>
				<template  slot="right" class="right">
					<view class="edit-user-info" >
						<view class="info">
							<input  type="text"  v-model="addressDetails.phone" placeholder="请填写收件人手机号"/>
						</view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item >
				<view slot="left"  class="slot-box" @click="isChecked">
					<zywork-icon v-if="addressDetails.isDefault==1"  type="icongou" color="#00aa7f" size="40"  />
					<view v-else  class="zy-checked"></view>
				</view>
				<text class="slot-text" >设为默认地址</text>
				
			</uni-list-item>
		</uni-list>
		<button class="add-btn" @click="confirm" :disabled="submitAddress">提交</button>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import {
		BASE_URL,
		USER_TOKEN_KEY,
		DEFAULT_HEADICON,
		showSuccessToast,
		showInfoToast,
		doGet,
		doPostJson,
		nullToStr,
		isPhone,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE
	} from '@/common/util.js'
	import * as ResponseStatus from '@/common/response-status.js'
	export default {
		components: {
			uniList,
			uniListItem,
			zyworkIcon
		},
		data() {
			return {
				type: 'add',
				indexBuilding:0,
				indexSchool:0,
				urls: {
					saveUrl: '/shipping-address/user/save',
					updateUrl: '/shipping-address/user/update',
				},
				addressDetails:{
					schoolId:0,
					building:"",
					area:"",
					addressee:"",
					phone:"",
					isDefault:0
				},
				arrayBuilding:['请选择','15栋','18栋','17栋','学校后门门口'],
				arraySchool: [],
				submitAddress: false
			};
		},
		onLoad(option ) {
			let title = '新增收货地址';
			this.detailAddress = true
			if(option.type==='edit'){
				title = '编辑收货地址'
				this.detailAddress = false
				this.addressDetails = JSON.parse(option.data)
			} else if (option.type === 'add') {
				this.addressDetails.isDefault = option.isDefault
				if (this.addressDetails.phone === '暂无') {
					this.addressDetails.phone = ''
				}
			}
			
			this.type = option.type
			uni.setNavigationBarTitle({
				title
			})
			this.getSchoolList();
		},
		methods:{
			// 加载学校列表
			getSchoolList(){
				doPostJson('/school/any/getList', this.pager, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						const rows = nullToStr(res.data.data);
						this.arraySchool = rows
						if(this.type=='edit'){
							this.arraySchool.forEach((item,index) =>{
								if(this.addressDetails.schoolId ==item.id){
									this.indexSchool = index;
								}
							})
						}else{
							this.addressDetails.schoolId = this.arraySchool[this.indexSchool].id;
						}
						
					} else {
						showInfoToast(res.data.message);
					}
					uni.hideLoading()
				}).catch(err => {
					console.log(err);
				})
			},
			buildingChange(e){
				this.indexBuilding = e.target.value
				this.addressDetails.building = this.arrayBuilding[this.indexBuilding];
			},
			schoolChange(e){
				this.indexSchool = e.target.value
				console.log(this.indexSchool)
				this.addressDetails.schoolId = this.arraySchool[this.indexSchool].id;
				this.addressDetails.school = this.arraySchool[this.indexSchool].school;
			},
			isChecked(){
				if(this.addressDetails.isDefault ==1){
					this.addressDetails.isDefault  =0;
				}else {
					this.addressDetails.isDefault  =1;
				}
			},
			//提交
			confirm(){
				let data = this.addressDetails;
				if(data.schoolId<=0){
					showInfoToast('请填写所在学校');
					return;
				}
				if(!data.realName){
					showInfoToast('请填写收货人姓名');
					return;
				}
				if(!isPhone(data.phone)){
					showInfoToast('请填写正确的手机号码');
					return;
				}
				if(!data.storiedBuilding){
					showInfoToast('请填写详细楼栋');
					return;
				}
				if(!data.area){
					showInfoToast('请填写所在宿舍门牌号');
					return;
				}
				let url = this.urls.saveUrl;
				if (this.type === 'edit') {
					url = this.urls.updateUrl;
				}
				this.submitAddress = true
				doPostJson(url, data, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						this.$api.prePage().refreshList()
						uni.navigateBack()
						this.submitAddress = false
					} else {
						showInfoToast(res.data.message)
						this.submitAddress = false
					}
				}).catch(err => {
					console.log(err)
				})
				
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';
	.page{
		width: 100%;
		background-color: #eeeeee;
		height: 100%;
		padding-top: 30rpx;
	}
	
	.zy-checked{
		width: 40rpx;
		height: 40rpx;
		border: solid 1rpx #00aa7f;
		border-radius: 50%;
	}
	
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.slot-text{
		font-size: $font-base;
	}
	.right{
		margin-right: 10rpx;
	}
	.edit-user-info{
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		width: 400rpx;
		.info{
			@include flex-center-row;
			align-items: center;
			justify-content: space-between;
			// width: 100%;
			border-radius: 35rpx;
			height: 30px;
			text{
				color: $base-color;
				font-size: $font-base;
			}
			input{
				margin-left: auto;
				text-align: right;
			}
		}
		.picker{
			text-align: right;
		}
		
		
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $theme-backcolor;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(0, 170, 127, 0.4);
	}
</style>
